<%--
  Created by IntelliJ IDEA.
  User: 91658
  Date: 2018/6/8
  Time: 10:20
  报表管理
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>报表管理</title>
    <style>
        .layui-input-inline.check{
            height: 6%;
        }
        .spending-pie-div{
            float: left;
        }
        .spending-line-div{
            float: left;
        }
        .income-pie-div{
            float: left;
        }
        .income-line-div{
            float: left;
        }
        .spending-smart-div{
            float: left;
        }
        .income-smart-div{
            float: left;
        }
    </style>
    <%@ include file="../common/common.jsp" %>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-form.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <%@ include file="../common/head.jsp" %>
    <%@ include file="../common/left.jsp" %>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">支出</li>
                    <li>收入</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div>
                            <form id="spendingForm" class="layui-form" action="/report/report_search" method="post" onsubmit="return false;">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">账户类型</label>
                                        <div class="layui-input-inline">
                                            <select name="accountType" lay-verify="required" lay-search="">
                                                <option value="">直接选择或搜索选择</option>
                                                <c:forEach items="${accountList}" var="account">
                                                    <option value="${account.id}">${account.accountName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">支出类型</label>
                                        <div class="layui-input-inline">
                                            <input type="hidden" name="paymentsType" value="1" />
                                            <select name="spendingType" lay-verify="required" lay-search="">
                                                <option value="">直接选择或搜索选择</option>
                                                <c:forEach items="${spendingList}" var="spending">
                                                    <option value="${spending.id}">${spending.spendingName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">创建时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="beginDate" id="spendingBeginDate" placeholder="开始日期" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-input-inline">
                                            <input type="text" name="endDate" id="spendingEndDate" placeholder="结束日期" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">年份</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="specificYear" id="spendingYear" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">月份</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="specificMonth" id="spendingMonth" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">季度范围</label>
                                        <div class="layui-input-inline">
                                            <select name="beginQuarter">
                                                <option value="">---请选择---</option>
                                                <option value="1">第一季度</option>
                                                <option value="2">第二季度</option>
                                                <option value="3">第三季度</option>
                                                <option value="4">第四季度</option>
                                            </select>
                                        </div>
                                        <div class="layui-input-inline">
                                            <select name="endQuarter">
                                                <option value="">---请选择---</option>
                                                <option value="1">第一季度</option>
                                                <option value="2">第二季度</option>
                                                <option value="3">第三季度</option>
                                                <option value="4">第四季度</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">维度</label>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="1" title="年度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="2" title="季度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="3" title="月度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="4" title="自然周" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="5" title="周日期" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="6" title="账户" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="7" title="项目" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="8" title="每日" lay-skin="primary"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="spendingPieBtn">饼状图查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="spendingLineBtn">折线图查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="spendingSmartBtn">智能查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div style="float: left;">
                            <div id="annualSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="quarterSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="monthlySpendingPieDiv" class="spending-pie-div"></div>
                            <div id="weekSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="weekDateSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="accountSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="projectSpendingPieDiv" class="spending-pie-div"></div>
                            <div id="daysSpendingPieDiv" class="spending-pie-div"></div>
                        </div>
                        <div style="float: left">
                            <div id="annualSpendingLineDiv" class="spending-line-div"></div>
                            <div id="quarterSpendingLineDiv" class="spending-line-div"></div>
                            <div id="monthlySpendingLineDiv" class="spending-line-div"></div>
                            <div id="weekSpendingLineDiv" class="spending-line-div"></div>
                            <div id="weekDateSpendingLineDiv" class="spending-line-div"></div>
                            <div id="accountSpendingLineDiv" class="spending-line-div"></div>
                            <div id="projectSpendingLineDiv" class="spending-line-div"></div>
                            <div id="daysSpendingLineDiv" class="spending-line-div"></div>
                        </div>
                        <div style="float: left">
                            <div id="annualSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="quarterSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="monthlySpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="weekSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="weekDateSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="accountSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="projectSpendingSmartDiv" class="spending-smart-div"></div>
                            <div id="daysSpendingSmartDiv" class="spending-smart-div"></div>
                        </div>
                    </div>
                    <%--收入--%>
                    <div class="layui-tab-item">
                        <div>
                            <form id="incomeForm" class="layui-form" action="/report/report_search" method="post" onsubmit="return false;">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">账户类型</label>
                                        <div class="layui-input-inline">
                                            <select name="accountType" lay-search="">
                                                <option value="">直接选择或搜索选择</option>
                                                <c:forEach items="${accountList}" var="account">
                                                    <option value="${account.id}">${account.accountName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">支出类型</label>
                                        <input type="hidden" name="paymentsType" value="2" />
                                        <div class="layui-input-inline">
                                            <select name="spendingType" lay-search="">
                                                <option value="">直接选择或搜索选择</option>
                                                <c:forEach items="${spendingList}" var="spending">
                                                    <option value="${spending.id}">${spending.spendingName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">创建时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="beginDate" id="incomeBeginDate" placeholder="开始日期" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-input-inline">
                                            <input type="text" name="endDate" id="incomeEndDate" placeholder="结束日期" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">年份</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="year" id="incomeYear" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">月份</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="month" id="incomeMonth" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">季度范围</label>
                                        <div class="layui-input-inline">
                                            <select name="beginQuarter">
                                                <option value="">---请选择---</option>
                                                <option value="1">第一季度</option>
                                                <option value="2">第二季度</option>
                                                <option value="3">第三季度</option>
                                                <option value="4">第四季度</option>
                                            </select>
                                        </div>
                                        <div class="layui-input-inline">
                                            <select name="endQuarter">
                                                <option value="">---请选择---</option>
                                                <option value="1">第一季度</option>
                                                <option value="2">第二季度</option>
                                                <option value="3">第三季度</option>
                                                <option value="4">第四季度</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">维度</label>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="1" title="年度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="2" title="季度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="3" title="月度" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="4" title="自然周" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="5" title="周日期" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="6" title="账户" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="7" title="项目" lay-skin="primary"></div>
                                        <div class="layui-input-inline check"><input type="checkbox" name="dimension" value="8" title="每日" lay-skin="primary"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="incomePieBtn">饼状图查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="incomeLineBtn">折线图查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" id="incomeSmartBtn">智能查看</button>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div style="float: left;">
                            <div id="annualIncomePieDiv" class="income-pie-div"></div>
                            <div id="quarterIncomePieDiv" class="income-pie-div"></div>
                            <div id="monthlyIncomePieDiv" class="income-pie-div"></div>
                            <div id="weekIncomePieDiv" class="income-pie-div"></div>
                            <div id="weekDateIncomePieDiv" class="income-pie-div"></div>
                            <div id="accountIncomePieDiv" class="income-pie-div"></div>
                            <div id="projectIncomePieDiv" class="income-pie-div"></div>
                            <div id="daysIncomePieDiv" class="income-pie-div"></div>
                        </div>
                        <div style="float: left">
                            <div id="annualIncomeLineDiv" class="income-line-div"></div>
                            <div id="quarterIncomeLineDiv" class="income-line-div"></div>
                            <div id="monthlyIncomeLineDiv" class="income-line-div"></div>
                            <div id="weekIncomeLineDiv" class="income-line-div"></div>
                            <div id="weekDateIncomeLineDiv" class="income-line-div"></div>
                            <div id="accountIncomeLineDiv" class="income-line-div"></div>
                            <div id="projectIncomeLineDiv" class="income-line-div"></div>
                            <div id="daysIncomeLineDiv" class="income-line-div"></div>
                        </div>
                        <div style="float: left">
                            <div id="annualIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="quarterIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="monthlyIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="weekIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="weekDateIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="accountIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="projectIncomeSmartDiv" class="income-smart-div"></div>
                            <div id="daysIncomeSmartDiv" class="income-smart-div"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@ include file="../common/bottom.jsp" %>
</div>
</body>
<script type="text/javascript">
    layui.use(['form', 'laydate', 'element'], function() {
        var form = layui.form
            , laydate = layui.laydate
            ,element = layui.element;

        form.render('select');
        laydate.render({
           elem: '#spendingYear'
            ,type: 'year'
        });
        laydate.render({
           elem: '#spendingMonth'
            ,type: 'month'
        });
        //日期
        laydate.render({
            elem: '#spendingBeginDate'
        });
        laydate.render({
            elem: '#spendingEndDate'
        });
        laydate.render({
            elem: '#incomeYear'
            ,type: 'year'
        });
        laydate.render({
            elem: '#incomeMonth'
            ,type: 'month'
        });
        //日期
        laydate.render({
            elem: '#incomeBeginDate'
        });
        laydate.render({
            elem: '#incomeEndDate'
        });

        $("#spendingPieBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#spendingForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setSpendingEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawPie(result.annualReport, 'annualSpendingPieDiv', '年度支出报表', '年度', '支出细项');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawPie(result.quarterReport, 'quarterSpendingPieDiv', '季度支出报表', '季度', '支出细项');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
//                        console.log(result.monthlyReport);
                            drawPie(result.monthlyReport, 'monthlySpendingPieDiv', '月度支出报表', '月度', '支出细项');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawPie(result.weekReport, 'weekSpendingPieDiv', '周支出报表', '自然周', '支出细项');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawPie(result.weekDateReport, 'weekDateSpendingPieDiv', '周支出报表', '周开始月份', '支出细项');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawPie(result.accountReport, 'accountSpendingPieDiv', '账户支出报表', '账户', '支出细项');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawPie(result.projectReport, 'projectSpendingPieDiv', '项目支出报表', '项目', '支出细项');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawPie(result.daysReport, 'daysSpendingPieDiv', '每日支出报表', '默认7日内', '支出细项');
                        }
                    }
                });
            } else {
                setSpendingEmpty();
            }
        });

        $("#spendingLineBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#spendingForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setSpendingEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawLine(result.annualReport, 'annualSpendingLineDiv', '年度支出报表', 100, '支出');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawLine(result.quarterReport, 'quarterSpendingPieDiv', '季度支出报表', 100, '支出');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
                            drawLine(result.monthlyReport, 'monthlySpendingPieDiv', '月度支出报表', 100, '支出');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawLine(result.weekReport, 'weekSpendingPieDiv', '周支出报表', 50, '支出');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawLine(result.weekDateReport, 'weekDateSpendingPieDiv', '周支出报表', 50, '支出');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawLine(result.accountReport, 'accountSpendingPieDiv', '账户支出报表',100, '支出');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawLine(result.projectReport, 'projectSpendingPieDiv', '项目支出报表', 80, '支出');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawLine(result.daysReport, 'daysSpendingPieDiv', '每日支出报表', 30, '支出');
                        }
                    }
                });
            } else {
                setSpendingEmpty();
            }
        });

        $("#incomePieBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#incomeForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setIncomeEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawPie(result.annualReport, 'annualIncomePieDiv', '年度收入报表', '年度', '收入细项');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawPie(result.quarterReport, 'quarterIncomePieDiv', '季度收入报表', '季度', '收入细项');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
//                        console.log(result.monthlyReport);
                            drawPie(result.monthlyReport, 'monthlyIncomePieDiv', '月度收入报表', '月度', '收入细项');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawPie(result.weekReport, 'weekIncomePieDiv', '周收入报表', '自然周', '收入细项');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawPie(result.weekDateReport, 'weekDateIncomePieDiv', '周收入报表', '周开始月份', '收入细项');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawPie(result.accountReport, 'accountIncomePieDiv', '账户收入报表', '账户', '收入细项');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawPie(result.projectReport, 'projectIncomePieDiv', '项目收入报表', '项目', '收入细项');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawPie(result.daysReport, 'daysIncomePieDiv', '每日收入报表', '默认15日内', '收入细项');
                        }
                    }
                });
            } else {
                setIncomeEmpty();
            }
        });

        $("#incomeLineBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#incomeForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setIncomeEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawLine(result.annualReport, 'annualIncomeLineDiv', '年度收入报表', 100, '收入');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawLine(result.quarterReport, 'quarterIncomeLineDiv', '季度收入报表', 100, '收入');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
                            drawLine(result.monthlyReport, 'monthlyIncomeLineDiv', '月度收入报表', 100, '收入');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawLine(result.weekReport, 'weekIncomeLineDiv', '周收入报表', 50, '收入');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawLine(result.weekDateReport, 'weekDateIncomeLineDiv', '周收入报表', 50, '收入');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawLine(result.accountReport, 'accountIncomeLineDiv', '账户收入报表',100, '收入');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawLine(result.projectReport, 'projectIncomeLineDiv', '项目收入报表', 100, '收入');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawLine(result.daysReport, 'daysIncomeLineDiv', '每日收入报表', 30, '收入');
                        }
                    }
                });
            } else {
                setIncomeEmpty();
            }
        });

        $("#spendingSmartBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#spendingForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setSpendingEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawLine(result.annualReport, 'annualSpendingSmartDiv', '年度支出报表', 100, '支出');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawLine(result.quarterReport, 'quarterSpendingSmartDiv', '季度支出报表', 100, '支出');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
                            drawLine(result.monthlyReport, 'monthlySpendingSmartDiv', '月度支出报表', 100, '支出');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawLine(result.weekReport, 'weekSpendingSmartDiv', '周支出报表', 50, '支出');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawLine(result.weekDateReport, 'weekDateSpendingSmartDiv', '周支出报表', 50, '支出');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawPie(result.accountReport, 'accountSpendingSmartDiv', '账户支出报表','账户', '支出细项');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawPie(result.projectReport, 'projectSpendingSmartDiv', '项目支出报表', '项目', '支出细项');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawLine(result.daysReport, 'daysSpendingSmartDiv', '每日支出报表', 30, '支出');
                        }
                    }
                });
            } else {
                setSpendingEmpty();
            }
        });

        $("#incomeSmartBtn").on("click",function () {
            if ($("input[type='checkbox']").is(':checked')) {
                $("#incomeForm").ajaxSubmit({
                    beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    },
                    success:function (data) {
                        // 将图表DIV清空 重新刷数据
                        setIncomeEmpty();
                        var result = eval('(' + data + ')');
                        if (result.annualReport !== null && result.annualReport !== undefined) {
                            drawLine(result.annualReport, 'annualIncomeSmartDiv', '年度收入报表', 100, '收入');
                        }
                        if (result.quarterReport !== null && result.quarterReport !== undefined) {
                            drawLine(result.quarterReport, 'quarterIncomeSmartDiv', '季度收入报表', 100, '收入');
                        }
                        if (result.monthlyReport !== null && result.monthlyReport !== undefined) {
                            drawLine(result.monthlyReport, 'monthlyIncomeSmartDiv', '月度收入报表', 100, '收入');
                        }
                        if (result.weekReport !== null && result.weekReport !== undefined) {
                            drawLine(result.weekReport, 'weekIncomeSmartDiv', '周收入报表', 50, '收入');
                        }
                        if (result.weekDateReport !== null && result.weekDateReport !== undefined) {
                            drawLine(result.weekDateReport, 'weekDateIncomeSmartDiv', '周收入报表', 50, '收入');
                        }
                        if (result.accountReport !== null && result.accountReport !== undefined) {
                            drawPie(result.accountReport, 'accountIncomeSmartDiv', '账户收入报表','账户', '收入细项');
                        }
                        if (result.projectReport !== null && result.projectReport !== undefined) {
                            drawPie(result.projectReport, 'projectIncomeSmartDiv', '项目收入报表', '项目', '收入细项');
                        }
                        if (result.daysReport !== null && result.daysReport !== undefined) {
                            drawLine(result.daysReport, 'daysIncomeSmartDiv', '每日收入报表', 30, '收入');
                        }
                    }
                });
            } else {
                setIncomeEmpty();
            }
        });
    });

    function setSpendingEmpty() {
        var pies = $(".spending-pie-div");
        for (var i = 0;i < pies.length;i++) {
            var pie = $(pies[i]);
            $(pie).empty();
            $(pie).css({"width":"0px","height":"0px"});
            $(pie).removeAttr('_echarts_instance_');
        }

        var lines = $(".spending-line-div");
        for (var i = 0;i < lines.length;i++) {
            var line = $(lines[i]);
            $(line).empty();
            $(line).css({"width":"0px","height":"0px"});
            $(line).removeAttr('_echarts_instance_');
        }

        var smarts = $(".spending-smart-div");
        for (var i = 0;i < smarts.length;i++) {
            var smart = $(smarts[i]);
            $(smart).empty();
            $(smart).css({"width":"0px","height":"0px"});
            $(smart).removeAttr('_echarts_instance_');
        }
    }
    function formattingPieData(data, legend_data, series_data, projectName) {
        for (var i = 0;i < data.length;i++) {
            legend_data.push(data[i].projectName);
            if (projectName === '支出细项') {
                series_data.push({name: data[i].projectName, value: data[i].totalMoney * -1});
            } else if (projectName === '收入细项') {
                series_data.push({name: data[i].projectName, value: data[i].totalMoney});
            }
        }
    }
    function drawPie(data, divId, titleText, titleSubText, projectName) {
        $("#" + divId).css({"width":"600px","height":"400px"});
        var legend_data = [];
        var series_data = [];
        formattingPieData(data, legend_data, series_data, projectName);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(divId));

        // 指定图表的配置项和数据
        var option = {
            title : {
                text: titleText,
                subtext: titleSubText,
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}元 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: legend_data
            },
            series : [
                {
                    name: projectName,
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: series_data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option, true);
    }

    function setIncomeEmpty() {
        var pies = $(".income-pie-div");
        for (var i = 0;i < pies.length;i++) {
            var pie = $(pies[i]);
            $(pie).empty();
            $(pie).css({"width":"0px","height":"0px"});
            $(pie).removeAttr('_echarts_instance_');
        }

        var lines = $(".income-line-div");
        for (var i = 0;i < lines.length;i++) {
            var line = $(lines[i]);
            $(line).empty();
            $(line).css({"width":"0px","height":"0px"});
            $(line).removeAttr('_echarts_instance_');
        }

        var smarts = $(".income-smart-div");
        for (var i = 0;i < smarts.length;i++) {
            var smart = $(smarts[i]);
            $(smart).empty();
            $(smart).css({"width":"0px","height":"0px"});
            $(smart).removeAttr('_echarts_instance_');
        }
    }
    function formattingLineData(data, projectName) {
        var xAxisData = [];
        var yAxisData = [];
        for (var i = 0; i < data.length; i++) {
            xAxisData.push(data[i].projectName);
            if (projectName === '支出') {
                yAxisData.push(data[i].totalMoney * -1);
            } else if (projectName === '收入') {
                yAxisData.push(data[i].totalMoney);
            }
        }
        return {
            xAxisData: xAxisData,
            yAxisData: yAxisData
        };
    }
    function drawLine(rowData, divId, titleText, endPosition, projectName) {
        $("#" + divId).css({"width":"600px","height":"400px"});
        var data = formattingLineData(rowData, projectName);
        var myChart = echarts.init(document.getElementById(divId));
        var option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: titleText,
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.xAxisData
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: endPosition
            }, {
                start: 0,
                end: 0,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name:projectName,
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 131)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                    data: data.yAxisData
                }
            ]
        };
        myChart.setOption(option, true);
    }
</script>
</html>
